<template>
    <div class="settingListView">
        <HeadTop :headName="msg"></HeadTop>

        <ul v-if="dataInfo.length>0" class="textList">
            <!-- <li v-for="(item,index) in dataInfo">{{item}}</li> -->
            <router-link to="/personal">
                <li >个人资料</li>
            </router-link>
            <router-link to="/account">
                <li>账号设置</li>
            </router-link>
          <li>缓存管理</li>
          <li>检查更新</li>
        </ul>
        <p class="button">
            <button  @click="logouthandler">退出登录</button>
        </p>
    </div>
</template>



<script>
import HeadTop from "@/components/HeadTop";
import {mapMutations} from "vuex"
export default {
    name: "settingListView",
    data() {
        return {
            msg: "设置"
        };
    },
    components: {
        HeadTop
    },
    props: {
        dataInfo: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },  
    methods:{
        ...mapMutations(["setToten"]),
        logouthandler(){
            //清除localStorage里面的token ,通过removeItem;而不是用null,设置为null则token依然存在
            //vuex里面的token设置为null;
            localStorage.removeItem("token")
            this.setToten(null)
            this.$router.push("/")
        }
    }
};
</script>
<style lang="less" scoped>
.textList {
    li {
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        margin: 10px 0;
        padding-left: 10px;
        background-color: #fff;
    }
}
.button{
    margin-top:30px;
    button{
        width:300px;
        height:50px;
        line-height:50px;
        background-color: #fff;
        border-radius: 15px;
        text-align:center;
        margin:0 auto;
        display:block;
        color:#171818;
        outline:none;
        font-size:1rem;
    }
}
</style>